/**
 * Created by Bruce on 2016/7/14.
 */

window.onload = function () {
    leftSwiper();
    rightSwiper();
};

function leftSwiper() {

    /*获取所需的元素*/
    var parentDom = document.querySelector(".cate_left");
    var childDom = parentDom.querySelector("ul");
    var lis = childDom.querySelectorAll("li");

    /*所需盒子的高度*/
    var parentHeight = parentDom.offsetHeight;
    var childHeight = childDom.offsetHeight;

    /*计算定位区间*/
    var maxPosition = 0;
    var minPosition = parentHeight - childHeight;

    /*可缓冲的距离*/
    var distance = 150;
    /*滑动区间*/
    var maxSwiper = maxPosition + distance;
    var minSwiper = minPosition - distance;

    var currY = 0;
    /*共用部分*/
    /*添加过渡*/
    function addTransition() {
        childDom.style.transition = "all 0.5s";
        childDom.style.webkitTransition = "all 0.5s";
    }
    /*删除过渡*/
    function removeTransition() {
        childDom.style.transition = "none";
        childDom.style.webkitTransition = "none";
    }
    /*设置位置*/
    function addTransform(translateY) {
        childDom.style.transform = "translateY(" + translateY + "px)";
        childDom.style.webkitTransform= "translateY(" + translateY + "px)";
    }


    /*滑动*/
    var startY = 0;
    var moveY = 0;
    var distanceY = 0;
    var isMove = false;
    childDom.addEventListener("touchstart", function (e) {
        startY = e.touches[0].clientY;
    });
    childDom.addEventListener("touchmove", function (e) {
        moveY = e.touches[0].clientY;
        distanceY = moveY - startY;
        removeTransition();

        /*滑动到一定距离内 不允许滑动    华东区间*/
        if((currY + distanceY) > minSwiper && (currY + distanceY) < maxSwiper) {
            addTransform(currY + distanceY);
        }

        isMove = true;

    });
    childDom.addEventListener("touchend", function (e) {
        /*滑动超过0  让它定位回去*/
        if((currY + distanceY) > maxPosition) {
            currY = maxPosition;
            addTransition();
            addTransform(currY);
        } else if((currY + distanceY) < minPosition) {
            currY = minPosition;
            addTransition();
            addTransform(currY);
        } else {
            currY = currY + distanceY
        }

        /*重置参数*/
        startY = 0;
        moveY = 0;
        distanceY = 0;
        isMove = false;
    });

    /*tap*/
    itcast.tap(childDom, function (e) {
        var currLi = e.target.parentNode;
        for(var i = 0; i < lis.length; i++) {
            lis[i].classList.remove("now");
            lis[i].index = i;
        }
        currLi.classList.add("now");

        /*点击的时候需要定位在顶部  当不满足定位条件时需要固定  */
        var translateY = -currLi.index * 50;
        if(translateY > minPosition) {
            currY = translateY;
            addTransition();
            addTransform(currY);
        } else {
            currY = minPosition;
            addTransform(currY);
        }
    })
}



function rightSwiper() {
    itcast.iScroll({
        swipeDom:document.querySelector(".cate_right"),
        swipeType: "y",
        swipeDistance: 100
    })
}